<template>
    <div>
        <Row>
            <i-col span="24">
                <Card>
                    <UserSearchQuick v-on:searchData="searchData" />
                    <Button class="opt-btn" @click="showAddModal" type="primary">添加</Button>
                    <Dropdown class="opt-btn" @on-click="batchOpt">
                        <Button type="primary">
                            批量操作
                            <Icon type="ios-arrow-down"></Icon>
                        </Button>
                        <DropdownMenu slot="list">
                            <DropdownItem name="batchActive">批量激活</DropdownItem>
                            <DropdownItem name="batchInactive"><span style="color: red;">批量冻结</span></DropdownItem>
                            <DropdownItem name="batchRemove" divided><span style="color: red;">批量删除</span></DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                    <Button class="opt-btn" @click="showSearchModal" type="primary">高级搜索</Button>
                    <Tooltip class="opt-btn" content="刷新" placement="right">
                        <Button icon="md-refresh" type="success" shape="circle" @click="searchTable(false)"></Button>
                    </Tooltip>
                    <Tooltip class="opt-btn" content="重置搜索" placement="right">
                        <Button icon="md-repeat" type="success" shape="circle" @click="researchTable"></Button>
                    </Tooltip>
                    <UserTableMain ref="table" v-on:searchTable="searchTable" v-on:showEditModal="showEditModal" 
                    v-on:showDetailModal="showDetailModal" v-on:showUserRoleAssignDrawer="showUserRoleAssignDrawer"
                    v-on:uploadHeadIcon="uploadHeadIcon"
                    v-on:updateNickname="updateNickname"
                    />
                </Card>
            </i-col>
        </Row>
        <UserAddEditModal ref="addEditModal" v-on:add="add" v-on:edit="edit"/>
        <UserSearchModal ref="searchModal" v-on:searchTable="searchTable"/>
        <UserDetailModal ref="detailModal"/>
        <UserRoleAssignDrawer ref="userRoleAssignDrawer"/>

        <!-- 上传用户头像 -->
        <UploadModal
          ref="uploadModal"
          @search="searchTable"
          :title="uploadModal.title"
          :format="uploadModal.format"
        />
    </div>
</template>

<script>
    import * as utils from '@/api/utils-v2'
    import * as ResponseStatus from '@/api/response-status.js'
    import UserTableMain from './UserTableMain.vue'
    import UserAddEditModal from './UserAddEditModal.vue'
    import UserSearchModal from './UserSearchModal.vue'
    import UserDetailModal from './UserDetailModal.vue'
    import UserRoleAssignDrawer from './UserRoleAssignDrawer.vue'
    import UserSearchQuick from './UserSearchQuick.vue'
    import UploadModal from '_c/upload-modal'

    import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
const cdnUrl = config.baseUrl.cdnUrl
    export default {
        name: 'UserMain',
        components: {
            UserTableMain,
            UserAddEditModal,
            UserSearchModal,
            UserDetailModal,
            UserRoleAssignDrawer,
            UploadModal,
            UserSearchQuick
        },
        data() {
            return {
                urls: {
                    batchRemoveUrl: '/user/admin/batch-remove',
                    batchActiveUrl: '/user/admin/batch-active',
                    oneUrl: '/user-detail/admin/one/',
                    updateNicknameUrl: '/user/admin/update-nickname'
                },
                uploadModal: {
                  title: '上传头像',
                  format: ['jpg', 'jpeg', 'png', 'bmp'],
                  uploadUrl: '/user-detail/admin/upload-headicon/'
                },
                nickname: ''
            }
        },
        computed: {},
        mounted() {},
        methods: {
          searchData(searchForm) {
            let searchModal = this.$refs.searchModal
            searchModal.searchForm = searchForm
            this.searchTable()
          },
            searchTable(reset) {
                utils.search(this, reset)
            },
            researchTable() {
                this.$refs.searchModal.resetForm()
                setTimeout(() => {
                    utils.search(this, true)
                }, 10);
            },
            showAddModal() {
                let addEditModal = this.$refs.addEditModal
                addEditModal.modal.add = true
            },
            add() {
                utils.add(this)
            },
            showEditModal(row) {
                let addEditModal = this.$refs.addEditModal
                addEditModal.modal.edit = true
                row.version = null
                row.createTime = null
                row.updateTime = null
                addEditModal.form = row
				
            },
            edit() {
                utils.edit(this)
            },
            showDetailModal(row) {
                let detailModal = this.$refs.detailModal
                detailModal.modal.detail = true
                detailModal.form = row
				detailModal.getDictItemsDisplayValue()
            },
            showSearchModal() {
                let searchModal = this.$refs.searchModal
                searchModal.modal.search = true
            },
            batchOpt(itemName) {
                if (itemName === 'batchActive') {
                    utils.batchActive(this, 0)
                } else if (itemName === 'batchInactive') {
                    utils.batchActive(this, 1)
                } else if (itemName === 'batchRemove') {
                    utils.batchRemove(this)
                }
            },
            showUserRoleAssignDrawer(userId) {
                let userRoleAssignDrawer = this.$refs.userRoleAssignDrawer
                userRoleAssignDrawer.userRoleDrawerFlag = true
                userRoleAssignDrawer.initData(userId)
            },
            /**
             * 上传用户头像
             */
            uploadHeadIcon(id) {
              this.$refs.uploadModal.uploadUrl = this.uploadModal.uploadUrl + id
              this.$refs.uploadModal.setUploadHeaders()
              this.$refs.uploadModal.uploadModal = true
            },
            /**
             * 更新用户昵称
             */
            updateNickname(row) {
              utils
                .doGet(this.urls.oneUrl + row.id, {})
                .then(res => {
                  if (ResponseStatus.OK === res.data.code) {
                    this.nickname = res.data.data.nickname
                    this.$Modal.confirm({
                      title: '修改用户昵称',
                      render: (h) => {
                        return h('div', {}, 
                        [
                          h('p', {}, '昵称'),
                          h('Input', {
                            props: {
                              value: this.nickname,
                              autofocus: true,
                              placeholder: '输入昵称'
                            },
                            on: {
                              input: (val) => {
                                this.nickname = val;
                              }
                            }
                          })
                        ])
                      },
                      onOk: () => {
                        const params = {
                          userId: row.id,
                          nickname: this.nickname
                        }
                        utils.doPostQs(this.urls.updateNicknameUrl, params, {}).then(res => {
                          this.confirmMoney = null
                          if (ResponseStatus.OK === res.data.code) {
                            this.$Message.success('更新成功')
                            this.searchTable()
                          } else {
                            this.$Message.error(res.data.message)
                          }
                        }).catch(err => {
                          console.log(err)
                        })
                      },
                      onCancel: () => {

                      }
                    })
                  } else {
                    this.$Message.error(res.data.message)
                  }
                  this.showSpin = false
                })
                .catch(err => {
                  this.showSpin = false
                  console.log(err)
                })
              
            }
        }
    }
</script>

<style>
</style>
